<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" th:replace="layout :: layout">
<head>
    <th:block th:fragment="page-styles">
        <style>
            .hero-section {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                border-radius: 15px;
                padding: 60px 40px;
                text-align: center;
                margin-bottom: 40px;
            }
            
            .feature-card {
                transition: transform 0.3s ease;
                height: 100%;
            }
            
            .feature-card:hover {
                transform: translateY(-5px);
            }
            
            .feature-icon {
                font-size: 3rem;
                color: #667eea;
                margin-bottom: 20px;
            }
            
            .quick-action-card {
                background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
                border: 2px solid rgba(102, 126, 234, 0.2);
                transition: all 0.3s ease;
            }
            
            .quick-action-card:hover {
                border-color: #667eea;
                transform: translateY(-3px);
                box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
            }
        </style>
    </th:block>
</head>

<main th:fragment="content">
    <!-- 欢迎横幅 -->
    <div class="hero-section">
        <h1 class="display-4 fw-bold mb-4">
            <i class="fas fa-tachometer-alt me-3"></i>
            HTTP性能压测工具
        </h1>
        <p class="lead mb-4">
            基于场景的HTTP性能压测工具，支持多并发用户模拟、实时监控和详细报告生成
        </p>
        <div class="d-flex justify-content-center gap-3">
            <a href="/configs/new" class="btn btn-light btn-lg">
                <i class="fas fa-plus me-2"></i>
                创建新场景
            </a>
            <a href="/configs" class="btn btn-outline-light btn-lg">
                <i class="fas fa-list me-2"></i>
                管理场景
            </a>
        </div>
    </div>

    <!-- 快速操作 -->
    <div class="row mb-5">
        <div class="col-12">
            <h3 class="mb-4">
                <i class="fas fa-bolt me-2"></i>
                快速操作
            </h3>
        </div>
        
        <div class="col-md-4 mb-3">
            <div class="card quick-action-card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-plus-circle feature-icon"></i>
                    <h5 class="card-title">创建新场景</h5>
                    <p class="card-text">快速创建一个新的性能测试场景配置</p>
                    <a href="/configs/new" class="btn btn-primary">
                        <i class="fas fa-plus me-2"></i>
                        开始创建
                    </a>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 mb-3">
            <div class="card quick-action-card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-play-circle feature-icon"></i>
                    <h5 class="card-title">执行测试</h5>
                    <p class="card-text">选择已有配置立即开始性能测试</p>
                    <a href="/tests" class="btn btn-primary">
                        <i class="fas fa-play me-2"></i>
                        执行测试
                    </a>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 mb-3">
            <div class="card quick-action-card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-chart-line feature-icon"></i>
                    <h5 class="card-title">查看报告</h5>
                    <p class="card-text">浏览历史测试报告和性能分析</p>
                    <a href="/reports" class="btn btn-primary">
                        <i class="fas fa-eye me-2"></i>
                        查看报告
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 功能特性 -->
    <div class="row mb-5">
        <div class="col-12">
            <h3 class="mb-4">
                <i class="fas fa-star me-2"></i>
                主要特性
            </h3>
        </div>
        
        <div class="col-md-6 col-lg-3 mb-4">
            <div class="card feature-card">
                <div class="card-body text-center">
                    <i class="fas fa-sitemap feature-icon"></i>
                    <h5 class="card-title">基于场景</h5>
                    <p class="card-text">支持复杂的多步骤测试场景，模拟真实用户行为</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-6 col-lg-3 mb-4">
            <div class="card feature-card">
                <div class="card-body text-center">
                    <i class="fas fa-users feature-icon"></i>
                    <h5 class="card-title">并发模拟</h5>
                    <p class="card-text">模拟多个虚拟用户同时访问，支持高并发测试</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-6 col-lg-3 mb-4">
            <div class="card feature-card">
                <div class="card-body text-center">
                    <i class="fas fa-globe feature-icon"></i>
                    <h5 class="card-title">HTTP/HTTPS</h5>
                    <p class="card-text">完整支持HTTP和HTTPS协议，兼容各种API接口</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-6 col-lg-3 mb-4">
            <div class="card feature-card">
                <div class="card-body text-center">
                    <i class="fas fa-chart-bar feature-icon"></i>
                    <h5 class="card-title">详细报告</h5>
                    <p class="card-text">生成详细的性能分析报告，支持多种格式导出</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 系统状态 -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        系统状态
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="metric-card">
                                <div class="metric-value" id="config-count">-</div>
                                <div class="metric-label">配置数量</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="metric-card">
                                <div class="metric-value" id="active-tests">-</div>
                                <div class="metric-label">活跃测试</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="metric-card">
                                <div class="metric-value text-success">正常</div>
                                <div class="metric-label">系统状态</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="metric-card">
                                <div class="metric-value" id="version">v1.0.0</div>
                                <div class="metric-label">版本信息</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<th:block th:fragment="page-scripts">
    <script>
        $(document).ready(function() {
            // 加载系统状态
            loadSystemStatus();
        });
        
        function loadSystemStatus() {
            $.get('/api/configs')
                .done(function(configs) {
                    $('#config-count').text(configs.length);
                })
                .fail(function() {
                    $('#config-count').text('加载失败');
                });
                
            // 模拟活跃测试数量
            $('#active-tests').text('0');
        }
    </script>
</th:block>
</html>